<!-- <%@ page contentType="text/html;charset=UTF-8" language="java" %> -->
<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>管理注册</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <p id="msg" th:text="'您好, '+ *{msg} + '!'" hidden></p>
</head>
<body>

<div class="container-fluid" style="background-color:#EEEEEE; height:800px;"><!-- style="background-color:gray;" -->
    <div class="container" style="width:600px;">
        <div class="row">
            <div class="col-md-12" style="background-color:#fff; margin: 20px 0px 20px 0px;border: solid #001 1px;border-radius: 10px; height:750px;padding:20px;">
                  <h2 style="text-align:center;color:#5BA9B8;">能力规范管理系统注册</h2>
                  <form action="/create" method="POST" onsubmit="return login()">
                      <div class="form-group">
                          <label for="name">用户名<span style="color:red;">*</span>
                          </label>
                          <input maxlength="10" required="required" type="text" name="name" class="form-control" id="name" placeholder="name">
                      </div>
                      <div class="form-group">
                          <label>性别<span style="color:red;">*</span>
                              <label style="margin-left: 70px;">
                                  <input type="radio" name="sex"  id="male" value="男" checked >
                                  男
                              </label>
                              <label>
                                  <input type="radio" name="sex" id="female" value="女">
                                  女
                              </label>
                          </label>
                      </div>
                      <div class="form-group">
                            <label for="date">出生日期<span style="color:red;">*</span>
                                <input type="date" style="margin-left: 40px;" name="birth" id="date" class="form_datetime" class="form-control" required="required">
                            </label>
                      </div>
                      <div class="form-group">
                          <label for="address">家庭住址<span style="color:red;">*</span>
                          </label>
                          <input required="required" type="text" maxlength="30" name="address" class="form-control" id="address" placeholder="address">
                      </div>
                      <div class="form-group">
                          <label for="idrecommend">推荐人手机号
                          </label>
                          <input type="number" maxlength="10" name="idrecommend" class="form-control" id="idrecommend" placeholder="push-people">
                      </div>
                      <div class="form-group">
                          <label for="SpecialCommittee">专委会<span style="color:red;">*</span>
                              <select name="committee" style="width:200px;margin-left: 50px;" id="SpecialCommittee">
                                <div th:each="committee,iterStat : ${committees}">
                                  <option  th:id="'committee' + ${committee.id}" th:text="${committee.name}" th:value="${committee.id}"></option>
                                </div>
                              </select>
                              <select id="ciscSelect" name="cisc" style="width:200px;margin-left: 50px;">
                                <div th:each="cisc,iterStat : ${ciscs}">
                                  <option th:name="'committee' + ${cisc.idcisc}" th:text="${cisc.name}" th:value="${cisc.id}"></option>
                                </div>
                              </select>
                          </label>
                      </div>   
                      <div class="form-group">
                          <label for="phone">手机号码<span style="color:red;">*</span></label>
                          <input type="number" maxlength="11" required="required" name="phone" class="form-control" id="phone" placeholder="您的登录账号">
                      </div>
                      <div class="form-group">
                          <label for="password">密码<span style="color:red;">*</span></label>
                          <input type="password" maxlength="20" name="password" class="form-control" id="password" required="required" placeholder="password">
                      </div>
                      <div class="form-group">
                          <label for="ConfirmPassword">确认密码<span style="color:red;">*</span></label>
                          <input type="password" maxlength="20" name="ConfirmPassword" class="form-control" id="ConfirmPassword" required="required" placeholder="confrim password">
                      </div>
                      <div class="row" style="margin-top: 30px;">
                          <div class="col-md-4">
                              <button type="submit" class="btn btn-primary">提交</button>
                          </div>
                          <div class="col-md-4">
                              <button type="reset" class="btn btn-danger">清空</button>
                          </div>
                          <div class="col-md-4">
                              <input type="button" class="btn btn-primary" th:value="返回" onclick="window.history.back()">
                          </div>
                      </div>
                  </form>
                  <a href="login.html" class="btn btn-default pull-right" href="login.html" role="button" style="font-size: 15px;color: #337AB7;">登录(login)</a>
            </div> 
        </div>
    </div>
</div>
    
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){

            // 错误信息提示
            msg = $("#msg").text();
            if(msg  != "您好, null!"){
                var r=confirm(msg)
                if (r==true)
                {
                    //document.write("You pressed OK!")
                }
                else
                {
                    //document.write("You pressed Cancel!")
                }
            }

            // 专委会默认选项
            document.getElementById("SpecialCommittee")[0].selected=true;
            $("#SpecialCommittee").children("option").get(0).selected = true;
            var defauls = $("#SpecialCommittee").children('option:selected');
            var str = defauls.attr("id");
            console.log("隐藏所有选项");
            $("#ciscSelect").find("option").css("display","none");
            console.log("显示name为" + str + "的标签");
            $("option[name="+str+"]").css("display","inline");
        });
    </script>
    <script type="text/javascript">
      $(document).ready(function(){  
        $('#SpecialCommittee').change(function(){
          console.log("隐藏所有选项");
          $("#ciscSelect").find("option").css("display","none");
          $("#ciscSelect").find("option").attr("show","no");
          p1=$(this).children('option:selected');//这就是selected的值

          str = p1.attr("id");
          console.log("显示name为" + str + "的标签");
          $("option[name="+str+"]").css("display","inline");
          $("option[name="+str+"]").attr("show","yes");
          $("#ciscSelect").children("option[show=yes]").get(0).selected = true;
        })  
      })  
    </script>
    <script type="text/javascript">
      function login() {
        // console.info("点击了登录");
        var userName = $("#name").val();
        // console.info(userName)
        // console.info(userPass);
        var userDate = $("#date").val();
        var userAddress = $("#address").val();
        var userIdrecommend = $("#idrecommend").val();
        var userPhone = $("#phone").val();
        var userPass = $("#password").val();
        var userConPass = $("#ConfirmPassword").val();
        if (userName == "" || userName == null) {
            alert("用户名不能为空");
            return false;
        } else if (userDate == "" || userDate == null) {
            alert("出生日期不能为空");
            return false;
        } else if (userAddress == "" || userAddress == null) {
            alert("地址不能为空");
            return false;
        } else if (userPhone == "" || userPhone == null) {
            alert("号码不能为空");
            return false;
        } else if (userPass == "" || userPass == null) {
            alert("密码不能为空");
            return false;
        } else if (userConPass == "" || userConPass == null) {
            alert("确认密码不能为空");
            return false;
        } else if (userPass != userConPass){
            alert("两次密码不一致");
            return false;
        }
          else {
            return true;  
        }
      }
    </script>
</body>
</html>